<template>
  <div>
    <div
      class="wrapper-container"
      style="display: flex; flex-direction: column; width: 100%"
    >
      <div class="search-container">
          <div style="margin-left: 40px">
            <el-button @click="addCourseSelection" type="warning" size="mini">增加教学班</el-button>
        </div>
      </div>
    </div>

    <div class="assessment-container">
      <div class="table-container">
        <el-table
          :data="tableData"
          border
          class="table-data"
          row-class-name="row-class"
          cell-class-name="cell-class"
          header-row-class-name="header-row-class"
          header-cell-class-name="header-cell-class"
          style="height: 580px; overflow-y: auto"
        >
        <el-table-column prop="courseCode" label="课程编号" align="center">
          </el-table-column>
          <el-table-column prop="coursename" label="课程名称" align="center">
          </el-table-column>
          <el-table-column label="删除" align="center" width="120px">
            <template slot-scope="scope">
              <div class="tables-btn">
                <div
                  class="search-button orange-css"
                  @click="deletedMessageInfo(scope.row)"
                >
                  <i class="el-icon-delete"></i>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="排课" align="center" width="120px">
            <template slot-scope="scope">
              <div class="tables-btn">
                <div
                  class="search-button purple-css"
                  @click="setclassRequire(scope.row)"
                >
                  <i class="el-icon-setting"></i>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="设置选课要求" align="center" width="120px">
            <template slot-scope="scope">
              <div class="tables-btn">
                <div
                  class="search-button green-css"
                  @click="setTeachingClass(scope.row)"
                >
                  <i class="el-icon-s-tools"></i>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="classname" label="教学班名称" align="center">
          </el-table-column>
          <el-table-column
            prop="xkyq"
            label="选课要求"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="sktime" label="上课时间/主讲教员/上课地点" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.sktime}} / {{scope.row.mainemployeeids}} / {{scope.row.skplace}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reservenum" label="额定人数" align="center">
          </el-table-column>
          <el-table-column
            prop="maxnum"
            label="最大预选人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="preselectionnum"
            label="预选人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="positivenum"
            label="正选人数"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <div class="wrapper-container">
      <div class="bottom-block" style="display: block">
        <div class="text">当前共找到200条记录,当前显示51-100条</div>
        <div class="search-container" style="margin-top: 5px">
          <ButtonItem
            :name="'导出Excel'"
            :link="''"
            :icon="'el-icon-download'"
            :buttonColor="'yellow'"
          ></ButtonItem>
        </div>
      </div>
      <div class="pagination-block">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div> -->
    <div class="btn-caozuo">
          <ButtonItem
            @click=""
            :name="'进入设置选课要求'"
            :link="'/admin/course/selection/setCourseRequirement'"
            :icon="''"
            :buttonColor="'green'"
          ></ButtonItem>
          <ButtonItem
            @click=""
            :name="'取消'"
            :link="'/admin/course/selection/courseBatchManagement'"
            :icon="''"
            :buttonColor="'red'"
          ></ButtonItem>
        </div>

    <el-dialog title="提示" :visible.sync="deletedMessageDialog" width="500px">
      <div class="class-tip">您确定删除当前信息?</div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="deletedInfo">确 定</button>
        <button
          class="yellow"
          @click="deletedMessageDialog = false"
          style="margin-left: 60px"
        >
          取 消
        </button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tablelist from "@/views/comonents/tablelist";
import ButtonItem from "@/components/ButtonItem.vue";
import {
  selectedBatchCourseList
} from "@/api/trainingManagement/place.js";
export default {
  components: {
    tablelist,
    ButtonItem,
  },
  data() {
    return {
      xkpcId: '',
      // 校区列表
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      total: 0, //总条数
      pageSize: 1000, //条数
      startPage: 0, //开始条数
      endPage: 0, //结束条数
      currentPage: 1, //当前页数

      showAddMessageDialog: false, //调课登记弹窗
      selectList: [],
      tableData: [
        // {
        //   classNumber: "12345632", //课程编号
        //   className: "二外选课", //课程名称
        //   teachingClass: "第二外语一级", //教学班名称
        //   courseRequirement: "可选年级2021，2020，2019", //选课要求
        //   ClassTimeProplePlace: "1-4,-8周/张悦/训练场", //上课时间/主讲教员/上课地点
        //   scheduledNumber: "80", //预定人数
        //   maximum: "70", //最大预选人数
        //   preselectedNumber: "75", //预选人数
        //   candidatesNumber: "70", //正选人数
        // },
      ],
      deletedMessageDialog: false, //删除课程弹窗
      selectRow: {}, //选中行信息
    };
  },
  created() {},
  mounted() {
    this.xkpcId = this.$route.query.xkpcId
    this.getTeachingClassInfo()
  },
  methods: {
    getTeachingClassInfo(){
      let xueqi = '';
      let classname = '';
      let xkpc = this.xkpcId;
      let current = this.currentPage;
      let size = this.pageSize;

      selectedBatchCourseList(xueqi,classname, xkpc, current, size).then(res=>{
        if(res.data.code == 200){
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      })
    },
    // 设置选课要求
    setclassRequire(row) {
      this.$router.push({
        path: '/admin/course/workOutScheduleTeaching'
      })
    },
    // 设置教学班
    setTeachingClass(row) {
      this.$router.push({
        path: "/admin/course/selection/setCourseRequirement",
        query: {
          xkpcId:row.id
        }
      })
    },
    // 增加选课批次
    addCourseSelection() {
      this.$router.push({
        path: "/admin/course/selection/addTeachingClass",
        query: {
          xkpcId:this.xkpcId
        }
      });
    },
    // 确认删除
    deletedInfo() {
      this.deletedMessageDialog = false;
      console.log(this.selectRow, "selectRow====");
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].classNumber == this.selectRow.classNumber) {
          this.tableData.splice(i, 1);
        }
      }
    },
    // 课程删除
    deletedMessageInfo(row) {
      this.deletedMessageDialog = true;
      this.selectRow = row;
      console.log(this.selectRow, "selectRow====");
    },
  },
  computed: {}, //计算属性
};
</script>
<style lang="less" scoped>
  .assessment-container {
    .el-dialog__body {
      height: 251px;
    }
    .el-dialog__footer {
      padding: 10px 20px 45px;
    }
    .el-checkbox__inner:hover {
      border-color: #004ca7;
    }
    .el-checkbox__inner {
      border: 1px solid #004ca7;
      border-radius: 0;
      height: 18px;
      width: 18px;
    }
    .el-checkbox__inner::after {
      height: 10px;
      left: 6px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #004ca7;
      border-color: #004ca7;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #004ca7;
    }
    .el-checkbox.is-bordered.is-checked {
      border-color: #004ca7;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #004ca7;
    }
  }
</style>
<style lang="less" scoped>
  @import "../../../../../styles/text.less";
  .assessment-container .table-container {
    // overflow: scroll;
  }
  .assessment-container .table-container .table-header {
    width: 1935px;
  }
  .assessment-container .table-container .table-body {
    width: 1935px;
  }
  /deep/ .szjky .el-dialog__body {
    height: 432px;
  }
  .pagination-block {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
<style lang="less" scoped>
  @import "../../../../../styles/supervision.less";

  // 表格底部样式
  @import "../../../../../styles/delayedExam.less";
  .pagination-block {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .wrapper-container {
    width: 1711px;
    margin: 0 auto;
  }

  /deep/ .table-container {
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 76px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }

    .wrapper-button {
      display: flex;
      flex-direction: column;
      align-items: center;

      > div {
        margin-bottom: 8px;
      }
    }
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      border-radius: 9px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }

  .wrapper-container .search-container .search-container-left {
    width: 100%;
    flex-wrap: wrap;
    .search-container-item {
      width: 12%;
      margin-right: 0px;
      .box {
        > span {
          text-align: left;
        }
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20px;
        align-items: center;
      }
    }
  }

  /deep/.el-date-editor.el-input {
    width: 110px;
  }
  /deep/ .el-input--medium {
    width: 110px;
    .el-input__inner {
      height: 28px;
      width: 110px;
      padding: 0px 18px;
    }
  }
  /deep/ .el-table thead {
    color: #004ca7 !important;
  }

  .btn {
    margin-top: 271px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 271px;
    .submit {
      width: 84px;
      height: 27px;
      line-height: 8px;
    }
  }
  .bottom-block {
    // display: flex;
    flex-direction: row;
    justify-content: space-between !important;
    .export-button {
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      > img {
        width: 17px;
        height: 17px;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }
    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }

  .search-button {
    width: 77px;
    height: 28px;
    line-height: 28px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }
    > img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }

  .mar-lef-2 {
    margin-left: 20px;
  }
  .undeLine {
    text-decoration: underline;
    cursor: pointer;
  }

  .edit-icon {
    font-size: 20px;
    color: #02c86c;
    margin-left: 10px;
    cursor: pointer;
  }

  .body-manual-container {
    > div:nth-child(1) {
      width: 1200px;
      // height: 785px;
      border: 1px solid rgba(0, 76, 167, 0.8);
      border-radius: 6px;
      margin: 30px auto 0;
      ul {
        list-style: none;
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          height: auto;
          > span {
            box-sizing: border-box;
            display: inline-block;
            font-size: 14px;
            color: rgba(0, 76, 167, 1);
            padding-left: 54px;
            border-right: 1px solid rgba(0, 76, 167, 0.4);
            height: 60px;
            padding-top: 20px;
            vertical-align: middle;
            &:nth-child(n) {
              // width: 357px;
              width: 290px;
            }
            // &:nth-child(2n) {
            // 	width: 444px;
            // }
            &:last-child {
              border-right: none;
            }
            &.active {
              font-size: 16px;
              color: rgba(0, 76, 167, 1);
              font-weight: bold;
              background: rgba(77, 129, 192, 0.1);
              text-align: center;
              padding-left: 0;
            }
            > span {
              color: rgba(255, 56, 25, 1);
            }
            > div {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .add-icon {
    font-size: 28px;
    color: #f3b815;
    margin-left: 10px;
    cursor: pointer;
  }

  .date-select {
    height: 100%;
    padding: 0;
    padding-left: 40px;
    overflow-y: auto;
    width: 900px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .date-select-show {
    height: 100%;
    width: 500px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .class-tip {
    color: #004ca7;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 40px;
  }

  .tip-text {
    color: #004ca7;
    margin-left: 5px;
    font-size: 16px;
  }

  /deep/ .xzjy .el-dialog__body {
    padding: 0 !important;
    .wrapper-container {
      width: 100% !important;
    }
    .wrapper-container .search-container .search-container-left {
      margin-left: 20px;
      flex-wrap: wrap;
      .search-container-item {
        width: 200px;
        margin-right: 10px;
        .box {
          > span {
            text-align: left;
            width: 80px;
          }
          display: flex;
          justify-content: space-evenly;
          margin-bottom: 20px;
          align-items: center;
          .el-input--medium .el-input__inner {
            height: 28px;
          }
        }
      }
    }
  }

  /deep/ .el-tree-node__expand-icon.expanded {
    color: rgb(0, 76, 167);
  }

  .xzjy .tree {
    padding: 30px;
    color: rgb(0, 76, 167);
    font-weight: bold;
    font-size: 16px;
  }

  .btn-caozuo {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 800px;
    margin: 0 auto;
    padding-top: 25px;
  }

  .tables-btn {
    display: flex;
    justify-content: space-around;
    > div {
      min-width: 60px;
    }
    .orange-css {
      color: #f5866a;
      border: 1px solid #f5866a;
      background: #feede2;
    }

    .purple-css {
      color: #5e36eb;
      border: 1px solid #5e36eb;
      background: #ebe4fe;
    }

    .green-css {
      color: #02c86c;
      border: 1px solid #02c86c;
      background: #dfffef;
    }
  }

  .assessment-container {
    width: calc(100% - 20px);
    .table-container {
      width: 100%;
    }
  }

  .scxx {
    /deep/ .el-dialog {
      height: 320px;
    }
  }

</style>

